<template>
  <div class="box">
    <bread-crumb></bread-crumb>
    <div class="wrap">
      <div class="xsxx">
        <h1 class="tit">学生信息录入</h1>
        <el-form ref="form" :model="form" label-width="120px">
          <el-row>
            <el-col :span="10">
              <el-form-item label="学号" prop="stu_id">
                <el-input v-model.trim="form.stu_id"></el-input>
              </el-form-item>
              <el-form-item label="姓名">
                <el-input v-model.trim="form.stu_name"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-radio v-model="form.stu_sex" label="男">男</el-radio>
                <el-radio v-model="form.stu_sex" label="女">女</el-radio>
              </el-form-item>
              <el-form-item label="籍贯">
                <el-cascader
                  v-model="value"
                  :options="options"
                  :props="{
                    label: 'name',
                    value: 'name',
                  }"
                  @change="handleChange"
                ></el-cascader>
              </el-form-item>
              <el-form-item label="日期">
                <el-date-picker
                  v-model="form.stu_date"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="男女朋友">
                <el-input v-model.trim="form.stu_gbf"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="头像">
                <input
                  type="file"
                  @change="getFile"
                  ref="getInp"
                  hidden
                  name=""
                  id=""
                />
                <div>
                  <img
                    width="150px"
                    height="150px"
                    :src="form.stu_head_img"
                    alt=""
                    srcset=""
                  />
                </div>

                <div>
                  <p>将其转为base64字符串上传</p>
                  <p>注：大小约为1M左右，否则不能上传</p>
                </div>
                <div>
                  <el-button @click="upLoad">上传图片</el-button>
                  <el-button @click="goCamera">拍照上传</el-button>
                </div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="爱好及自我评价">
            <Toolbar
              style="border-bottom: 2px solid black"
              :editor="editor"
              :defaultConfig="toolbarConfig"
              :mode="mode"
            />
            <div class="wangEditWrap" style="height: 150px; overflow: hidden">
              <Editor
                style="height: 300px; overflow-y: hidden"
                v-model="html"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="onCreated"
              />
            </div>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" :plain="true" @click="tijiao"
              >提交</el-button
            >
            <el-button type="primary" @click="empty">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { Message } from "element-ui";
import { Cascader } from "element-ui";
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { req_area, req_stu_info } from "../../api/stuInfo";
export default {
  data() {
    return {
      form: {
        stu_id: "",
        stu_name: "",
        stu_sex: "男",
        stu_jg: "",
        stu_date: "",
        stu_hobby: "",
        stu_gbf: "",
        stu_head_img: "",
      },
      value: [],
      options: [],
      editor: null,
      html: "<p>hello</p>",
      toolbarConfig: {},
      editorConfig: { placeholder: "请输入内容..." },
      mode: "default",
    };
  },
  async mounted() {
    let result = await req_area();
    console.log(result);
    this.options = result.data;
    console.log(this.$route.query);
    this.form.stu_head_img = this.$route.query.imgSrc;
    console.log(this.form);
  },
  methods: {
    // 摄像头
    goCamera() {
      this.$router.push({
        name: "photoup",
      });
    },

    // 上传图片
    upLoad() {
      this.$refs.getInp.click();
    },
    // 头像
    getFile() {
      console.log("获取图片的函数");
      let that = this;
      console.dir(this.$refs.getInp.files[0]);
      let f = this.$refs.getInp.files[0];
      let fr = new FileReader();
      fr.readAsDataURL(f);
      fr.onload = function () {
        that.form.stu_head_img = fr.result;
      };
    },
    // 籍贯
    handleChange(value) {
      console.log(value);
      this.form.stu_jg = value.join("-");
      console.log(this.form.stu_jg);
    },

    // 提交
    async tijiao() {
      this.form.stu_hobby = this.editor.getText();
      console.log(this.form);
      let result = await req_stu_info(this.form);
      console.log(result);
      if (result.data == "提交成功！！") {
        Message({
          type: "success",
          message: "提交成功",
        });
      } else {
        alert("异常");
        Message({
          type: "error",
          message: "学号重复，或网络不稳定，请重新提交",
        });
      }
    },

    // 重置
    empty() {
      // 强制刷新
      location.reload();
      // this.html = "<p></p>";
      // this.$refs.getInp({ query: {} });
      this.$refs.form.resetFields();
    },
    onCreated(editor) {
      this.editor = Object.seal(editor);
    },
  },
  components: {
    "el-cascader": Cascader,
    Editor,
    Toolbar,
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy();
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  .xsxx {
    width: 800px;
    .tit {
      text-align: center;
      margin-bottom: 20px;
    }
  }
}
</style>